<!DOCTYPE html> <html>
<head>
<title>Items</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">
      
<blockquote>普通按钮</blockquote>
<button class='btn'>按钮 &lt;button&gt;</button>
<a class='btn'>按钮 &lt;a&gt;</a>
<br/><br/>

<blockquote>禁用按钮</blockquote>
<button class='btn' disabled>禁用 disabled</button>
<br/><br/>

      
<blockquote>各种尺寸按钮</blockquote>
<button class='btn btn-lg'>大按钮 btn btn-lg</button>
<button class='btn'>按钮 btn</button>
<button class='btn btn-sm'>小按钮 btn btn-sm</button>
<button class='btn btn-xs'>微按钮 btn btn-xs</button>
<br/><br/>

<blockquote>自定样式按钮</blockquote>
<button class='btn btn-default'>按钮</button> <code>class=btn-default</code><br/>
<button class='btn' style='background: #359802;color:#ffffff;'>按钮</button>
<button class='btn' style='background: #980202;color:#ffffff;'>按钮</button>
<button class='btn' style='background: #810298;color:#ffffff;'>按钮</button>
<button class='btn' style='background: #efff00;color:#000000;'>按钮</button> <code>用style实现</code>
<br/><br/>

<blockquote>图标+文字按钮</blockquote>
<button class='btn'><i>&#xe6b9</i>按钮</button> <code>不用class定义icon-*，直接使用unicode</code>
<br/><br/>

<blockquote>只带图标按钮</blockquote>
<button class='btn'><i>&#xe6b9</i></button>
<br/><br/>

<blockquote>左右连体按钮 btn-group</blockquote>
<div class="btn-group">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div> 后面文字并排
<br/><br/>
<div class="btn-group br">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div> 带br，后面文字换行
<br/><br/>

<blockquote>上下连体按钮 btn-group-vertical</blockquote>
<div class="btn-group-vertical">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>
<br/><br/>

<blockquote>JS控制下拉菜单按钮</blockquote>
<a class='btn btn-menu btn-menu-caret'>
    按钮
    <ul class="ciy-popmenu" style="top:2em;">
        <li onclick="javascript:alert('ccktt')">aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
</a>
<br/>
需调用ciy_menu(".btn-menu");
<br/><br/>

<blockquote>连体+上拉菜单按钮</blockquote>
<div class="btn-group">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <a class='btn btn-menu'>
      <ul class="ciy-popmenu" style="bottom:2em;">
          <li onclick="javascript:alert('ccktt')">aaa</li>
          <li>aaa</li>
          <li>aaa</li>
          <li>aaa</li>
          <li>aaa</li>
      </ul>
      <span class="caret"></span>
  </a>
</div>
<br/><br/>

<blockquote>CSS控制下拉菜单按钮</blockquote>
<label class='btn'>
    按钮
    <input type="checkbox" />
    <ul class="ciy-popmenu" style="top:2em;">
        <li onclick="javascript:alert('ccktt')">aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
    <span class="caret"></span>
</label>
<br/>
无需任何JS调用
<br/><br/>


<blockquote>CSS控制上拉菜单按钮</blockquote>
<label class='btn'>
    按钮
    <input type="checkbox" />
    <ul class="ciy-popmenu" style="bottom:2em;">
        <li onclick="javascript:alert('ccktt')">aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
    <span class="caret"></span>
</label>
<br/><br/>


  </div>
<script src="/jscss/jquery-1.12.4.min.js"></script>
<script src="/jscss/ciy.js"></script>
<script type="text/javascript">
'use strict';
$(function(){
    ciy_menu(".btn-menu");
});
</script>
</body></html>